{% extends "simgenex/base_simgenex.html" %}
{%block center%}
{% include "simgenex/addSimexpressionInstructionModal.html" %}

<div class="edit_form" >
    <h2 class="title">Edit Simgenex expression</h2>
    <form id="editSimexpression" action="edit" method="post" class="edit">
        {% csrf_token %}
        <div class="input_field" >
            <label>Name:</label>
            <span class="helptext">Enter name of simexpression</span>
            <input type="text" name="name" value="{{simexpression.simexpression_name}}" />
        </div>

        <div id="instructions" class="input_field">
            <label>Instructions:</label>
            <span class="helptext">Specifying the instructions for this simulating gene expression.(Notes: the instruction is ordered!)</span>
            <a href="#simexpression_form" class="link-button" id="addSimexpressionInstruction">Add Instruction</a>
            <ul id="instruction_list">
                {% for instruction in inst_list %}
                {% if  instruction.type == "foreach" %}
                <li id='{{instruction.id}}' class="{{instruction.css}}">
                    <div class="instruction_element" >
                        <div class="index">
                            <span>Instruction {{instruction.id|cut:"ins"}}: </span>
                        </div>
                        <div class="definition">
                            <label >Type:</label><b>{{instruction.type}}</b>
                            <input type="hidden" name="instructions.{{instruction.id|cut:'ins'}}.itype" value="{{instruction.type}}" readonly="readonly"/>
                            <label class="long">Procedures:</label>
                            <input type="text" name="instructions.{{instruction.id|cut:'ins'}}.procedures" title="Procedure list, separated by commas ( , )" value="{{instruction.procedures}}" />
                        </div>
                        <div class="control">
                            <a href="javascript:void(0);" class="del" title="Remove the instruction" id="{{instruction.del_id}}" ></a>
                            <a href="javascript:void(0);" class="move-up" title="Move instruction up 1 level"></a>
                            <a href="javascript:void(0);" class="move-down" title="Move instruction down 1 level"></a>
                            <a href="#simexpression_form" class="insert" title="Insert new instruction above this" id="insert{{instruction.id|cut:"ins"}}"></a>
                                                                                         </div>
                            </div>
                        </li>
                        {% else %}
                        {% if  instruction.type == "treatment" %}
                        <li id="{{instruction.id}}" class="{{instruction.css}}">
                    <div class="instruction_element" >
                        <div class="index">
                            <span>Instruction {{instruction.id|cut:"ins"}}: </span>
                        </div>
                        <div class="definition">
                            <label>Type:</label><b>{{instruction.type}}</b>
                            <input type="hidden" name="instructions.{{instruction.id|cut:'ins'}}.itype" value="{{instruction.type}}" readonly="readonly"/>
                            <label class="long">Factor:</label>
                            <select name="instructions.{{instruction.id|cut:'ins'}}.ifactor" class="editable-select">
                                {% for tp in request.session.sgx_program.target_tp %}
                                {% for f in tp.factor_list %}
                                <option value="{{f.name}}"
                                        {% if instruction.factor == f.name %}
                                        selected="selected"
                                        {%endif%}
                                        >{{f.name}}</option>
                                {% endfor %}
                                {% endfor %}
                            </select>
                            <label class="long">Expression Level:</label>
                            <input type="text" name="instructions.{{instruction.id|cut:'ins'}}.iexpr" value="{{instruction.expression_level}}" />
                        </div>
                        <div class="control">
                            <a href="javascript:void(0);" class="del" title="Remove the instruction" id="{{instruction.del_id}}" ></a>
                            <a href="javascript:void(0);" class="move-up" title="Move instruction up 1 level"></a>
                            <a href="javascript:void(0);" class="move-down" title="Move instruction down 1 level"></a>
                            <a href="#instruction_form" class="insert" title="Insert new instruction above this" id="insert{{instruction.id|cut:"ins"}}"></a>
                                                                                         </div>
                            </div>
                        </li>
                        {% else %}
                        {% if instruction.type == "runtimesteps" %}
                        <li id='{{instruction.id}}' class="{{instruction.css}}">
                    <div class="instruction_element" >
                        <div class="index">
                            <span>Instruction {{instruction.id|cut:"ins"}}: </span>
                        </div>
                        <div class="definition">
                            <label>Type:</label><b>{{instruction.type}}</b>
                            <input type="hidden" name="instructions.{{instruction.id|cut:'ins'}}.itype" value="{{instruction.type}}" readonly="readonly"/>
                            <label class="long">Time Steps:</label><input type="text" name="instructions.{{instruction.id|cut:'ins'}}.itimestep" value="{{instruction.timestep}}"/>
                        </div>
                        <div class="control">
                            <a href="javascript:void(0);" class="del" title="Remove the instruction" id="{{instruction.del_id}}" ></a>
                            <a href="javascript:void(0);" class="move-up" title="Move instruction up 1 level"></a>
                            <a href="javascript:void(0);" class="move-down" title="Move instruction down 1 level"></a>
                            <a href="#instruction_form" class="insert" title="Insert new instruction above this" id="insert{{instruction.id|cut:"ins"}}"></a>
                                                                                         </div>
                            </div>
                        </li>
                        {% else %}
                        {% if instruction.type == "knockout" %}
                        <li id='{{instruction.id}}' class="{{instruction.css}}">
                    <div class="instruction_element">
                        <div class="index">
                            <span>Instruction {{instruction.id|cut:"ins"}}: </span>
                        </div>
                        <div class="definition">
                            <label>Type:</label><b>{{instruction.type}}</b>
                            <input type="hidden" name="instructions.{{instruction.id|cut:'ins'}}.itype" value="{{instruction.type}}" readonly="readonly"/>
                            <label class="long">Gene:</label>
                            <select name="instructions.{{instruction.id|cut:'ins'}}.igene" class="editable-select">
                                {% for tp in request.session.sgx_program.target_tp %}
                                {% for g in tp.gene_list %}
                                <option value="{{g.name}}"
                                        {% if instruction.gene == g.name %}
                                        selected="selected"
                                        {%endif%}
                                        >{{g.name}}</option>
                                {% endfor %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="control">
                            <a href="javascript:void(0);" class="del" title="Remove the instruction" id="{{instruction.del_id}}" ></a>
                            <a href="javascript:void(0);" class="move-up" title="Move instruction up 1 level"></a>
                            <a href="javascript:void(0);" class="move-down" title="Move instruction down 1 level"></a>
                            <a href="#instruction_form" class="insert" title="Insert new instruction above this" id="insert{{instruction.id|cut:"ins"}}"></a>
                                                                                         </div>
                            </div>
                        </li>
                        {% else %}
                        {% if instruction.type == "setproduct" %}
                        <li id='{{instruction.id}}' class="{{instruction.css}}">
                    <div class="instruction_element" >
                        <div class="index">
                            <span>Instruction {{instruction.id|cut:"ins"}}: </span>
                        </div>
                        <div class="definition">
                            <label>Type:</label><b>{{instruction.type}}</b>
                            <input type="hidden" name="instructions.{{instruction.id|cut:'ins'}}.itype" value="{{instruction.type}}" readonly="readonly"/>
                            <label class="long">Gene:</label>
                            <select name="instructions.{{instruction.id|cut:'ins'}}.gene" class="editable-select">
                                {% for tp in request.session.sgx_program.target_tp %}
                                {% for g in tp.gene_list %}
                                <option value="{{g.name}}"
                                        {% if instruction.gene == g.name %}
                                        selected="selected"
                                        {%endif%}
                                        >{{g.name}}</option>
                                {% endfor %}
                                {% endfor %}
                            </select>
                            <label class="long">Factor:</label>
                            <select name="instructions.{{instruction.id|cut:'ins'}}.factor" class="editable-select">
                                <option value="undefined" selected="selected" >select</option>
                                {% for tp in request.session.sgx_program.target_tp %}
                                {% for f in tp.factor_list %}
                                <option value="{{f.name}}"
                                        {% if instruction.factor == f.name %}
                                        selected="selected"
                                        {%endif%}
                                        >{{f.name}}</option>
                                {% endfor %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="control">
                            <a href="javascript:void(0);" class="del" title="Remove the instruction" id="{{instruction.del_id}}" ></a>
                            <a href="javascript:void(0);" class="move-up" title="Move instruction up 1 level"></a>
                            <a href="javascript:void(0);" class="move-down" title="Move instruction down 1 level"></a>
                            <a href="#instruction_form" class="insert" title="Insert new instruction above this" id="insert{{instruction.id|cut:"ins"}}"></a>
                                                                                         </div>
                            </div>
                        </li>
                        {% else %}
                        {% if  instruction.type == "overexpress" %}
                        <li id="{{instruction.id}}" class="{{instruction.css}}">
                    <div class="instruction_element" >
                        <div class="index">
                            <span>Instruction {{instruction.id|cut:"ins"}}: </span>
                        </div>
                        <div class="definition">
                            <label>Type:</label><b>{{instruction.type}}</b>
                            <input type="hidden" name="instructions.{{instruction.id|cut:'ins'}}.itype" value="{{instruction.type}}" readonly="readonly"/>
                            <label class="long">Factor:</label>
                            <select name="instructions.{{instruction.id|cut:'ins'}}.ifactor" class="editable-select">
                                {% for tp in request.session.sgx_program.target_tp %}
                                {% for f in tp.factor_list %}
                                <option value="{{f.name}}"
                                        {% if instruction.factor == f.name %}
                                        selected="selected"
                                        {%endif%}
                                        >{{f.name}}</option>
                                {% endfor %}
                                {% endfor %}
                            </select>
                            <label class="long">Constitute Value:</label>
                            <input type="text" name="instructions.{{instruction.id|cut:'ins'}}.iexpr" value="{{instruction.constitute_value}}" />

                        </div>
                        <div class="control">
                            <a href="javascript:void(0);" class="del" title="Remove the instruction" id="{{instruction.del_id}}" ></a>
                            <a href="javascript:void(0);" class="move-up" title="Move instruction up 1 level"></a>
                            <a href="javascript:void(0);" class="move-down" title="Move instruction down 1 level"></a>
                            <a href="#instruction_form" class="insert" title="Insert new instruction above this" id="insert{{instruction.id|cut:"ins"}}"></a>
                                                                                         </div>
                            </div>
                        </li>
                        {% else %}
                        {% if  instruction.type == "invocation" %}
                        <li id="{{instruction.id}}" class="{{instruction.css}}">
                    <div class="instruction_element" >
                        <div class="index">
                            <span>Instruction {{instruction.id|cut:"ins"}}: </span>
                        </div>
                        <div class="definition">
                            <label>Type:</label><b>{{instruction.type}}</b>
                            <input type="hidden" name="instructions.{{instruction.id|cut:'ins'}}.itype" value="{{instruction.type}}" readonly="readonly"/>
                            <label class="long">Procedure:</label>
                            <select name="instructions.{{instruction.id|cut:'ins'}}.procedure">
                                {% for p in request.session.sgx_program.sgx.procedure_defs %}
                                <option value="{{p.procedure_name}}"
                                        {% if p.procedure_name == instruction.procedure.procedure_name%}
                                        selected="selected"
                                        {% endif %}
                                        >{{p.procedure_name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="control">
                            <a href="javascript:void(0);" class="del" title="Remove the instruction" id="{{instruction.del_id}}" ></a>
                            <a href="javascript:void(0);" class="move-up" title="Move instruction up 1 level"></a>
                            <a href="javascript:void(0);" class="move-down" title="Move instruction down 1 level"></a>
                            <a href="#instruction_form" class="insert" title="Insert new instruction above this" id="insert{{instruction.id|cut:"ins"}}"></a>
                                                                                         </div>
                            </div>
                        </li>
                        {% endif %}
                        {% endif %}
                        {% endif %}
                        {% endif %}
                        {% endif %}

                        {% endif %}
                        {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                <div>
                    <button type="submit" name="submit" > Submit</button>
                </div>
            </form>
        </div>
        {% endblock %}